<template>
  <a-form ref="formRef" :model="formData" :rules="formRules" :label-col="{ span: 8 }" class="form">
    <a-row :gutter="24">
      <a-col :span="8">
        <a-form-item label="出库编号" name="warehousebillcode">
          <a-input v-model:value="formData.warehousebillcode" placeholder="请输入仓库编号" allow-clear />
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item label="出库仓库" name="warehouseid">
          <a-select  v-model:value="formData.warehouseid"  placeholder="请选择仓库" :options="categoryOptions"  allow-clear  style="width: 100%" ></a-select>
        </a-form-item>
      </a-col>
      
      <a-col :span="8">
        <a-form-item label="出库时间" name="warehousedate">
          <a-date-picker 
            v-model:value="formData.warehousedate" 
            style="width: 100%"
            placeholder="请选择出库时间"
          />
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item label="出库名称" name="warehousebillname">
          <a-input v-model:value="formData.warehousebillname" placeholder="请输入出库名称" allow-clear />
        </a-form-item>
      </a-col>

      <a-col :span="8">
        <a-form-item label="出库类型" name="warehousebilltype">
          <a-select 
            v-model:value="formData.warehousebilltype"
            placeholder="请选择入库类型"
            :options="[{value:1,label:'销售出库'},{value:2,label:'退货出库'}]"
            style="width: 100%"
          ></a-select>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item label="备注" name="remark">
          <a-input v-model:value="formData.remark" placeholder="请输入备注信息" allow-clear />
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
  <a-divider>入库明细信息</a-divider>

  <a-button type="primary" @click="handleAdd"><template #icon><PlusOutlined /></template> 添加</a-button>

      <a-table
    ref="table"
    style="margin-top: 10px;"
    :columns="columns"
    bordered
    :row-key="(record) => record.id"
    :data-source="dataSource"
  >
    <template #bodyCell="{ column, record,index }">
      <template v-if="column.dataIndex === 'materialname'">
        <a-input v-model:value="record.materialname" style="width:100px" disabled ></a-input><a-button @click="form.openmodal(index)" style="margin-left: 10px;" type="primary"><search-outlined /></a-button>
      </template>
      <template v-if="column.dataIndex === 'materialcode'">
        <a-input v-model:value="record.materialcode" disabled ></a-input>
      </template>
      <template v-if="column.dataIndex === 'specification'">
        <a-input v-model:value="record.specification" disabled ></a-input>
      </template>
      <template v-if="column.dataIndex === 'instoreqty'">
        <a-input-number v-model:value="record.instoreqty" :min="1" :max="maxnum" @change="calculateTotal(record)" />
      </template>
      <template v-if="column.dataIndex === 'price'">
        <a-input v-model:value="record.price" disabled @change="calculateTotal(record)"></a-input>
      </template>
      <template v-if="column.dataIndex === 'toolprices'">
        <a-input v-model:value="record.toolprices" disabled></a-input>
      </template>

      <template v-if="column?.dataIndex === 'action'">
        <a-space>
          <a-popconfirm title="确定要删除此信息吗？" @confirm="deleteModule(record)">
            <a-button type="link" danger size="small">删除</a-button>
          </a-popconfirm>
        </a-space>
      </template>
    </template>
  </a-table>
  <a-button type="primary" @click="onSubmit"><template #icon><PlusOutlined /></template>确认出库</a-button>&nbsp;

<!-- 对话框显示商品信息 -->
<Form ref="form"  @confirm="handleMaterialConfirm" @successful="table.refresh(true)"  />
</template>
<script setup name="procureInfo">
import { message } from 'ant-design-vue';
import { required } from '@/utils/formRules'
import tool from '@/utils/tool'
import Form from './detail.vue'
import warehouseapi  from '@/api/wms/warehouse/warehouseapi'
import router from '@/router'


//#region  表格新增行


const maxnum=ref(null)
// 入库明细表单数据
const table = ref()
let form = ref()
//明细数据
const dataSource = ref([])
const columns = [
  {title: '产品名称',dataIndex: 'materialname',width: '250px'},
  {title: '规格型号',dataIndex: 'specification',},
  {title: '数量',dataIndex: 'instoreqty',},
  {title: '价格',dataIndex: 'price',},
  {title: '总价',dataIndex: 'toolprices',},
  {title: '操作',dataIndex: 'action',align: 'center',width: '200px'}
]

//点击按钮新增行
const handleAdd=()=>{
  dataSource.value.push({
    materialname:'',
    materialcode:'',
    specification:'',
    instoreqty:'',
    price:'',
    toolprices:'',
    product_Id:'',
  })
}

//自动计算总价
const calculateTotal = (record) => {
const qty = parseFloat(record.instoreqty) || 0;
const price = parseFloat(record.price) || 0;
record.toolprices = (qty * price).toFixed(2); // 保留2位小数

};

//#endregion

// 默认是关闭状态
const emit = defineEmits({ successful: null })
const formRef = ref()

// 入库表单数据
const formData = ref({})

// 默认要校验的
const formRules = {
  warehousebillcode: [required('请输入仓库编号')],
  warehouseid: [required('请选择出库仓库')],
  warehousedate: [required('请输入出库时间')],
  warehousebillname: [required('请输入出库名称')],
  warehousebilltype: [required('请选择出库类型')],
}

// 验证并提交数据
const onSubmit = () => {
// 转换明细数据
formData.value.outwarehouselist = dataSource.value.map(item => ({
  product_Id: item.product_Id,
  price: item.price,          // 修正字段名（原代码用 product_Id 可能是错误）
  toolprice: item.toolprice,
  instoreqty: item.instoreqty,
}));
 
  console.log(formData.value.ware_warehousebilllist)

    warehouseapi.Add2(formData.value).then(() => {
      message.success('添加成功');
      //跳转到入库列表
      router.replace({ path: '/warehouse/outwarehouse' })
    })
}
 //分类字典获取仓库
 const categoryOptions = tool.dictList('warehouseid')


const handleMaterialConfirm = (selectedMaterial,rowindex) => {
// 在这里处理接收到的数据（如更新表单、存储到状态等）
dataSource.value[rowindex].materialname=selectedMaterial.productname
dataSource.value[rowindex].specification=selectedMaterial.specification
dataSource.value[rowindex].product_Id=selectedMaterial.product_Id
dataSource.value[rowindex].price=selectedMaterial.price
maxnum.value=selectedMaterial.inventoryqty
console.log(maxnum.value)
};


</script>
<style scoped>
.form {
padding: 16px 24px;
}

.ant-form-item {
margin-bottom: 16px;
}

.footer-content {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}

.action-buttons {
display: flex;
align-items: center;
}

/* 移动端适配 */
@media (max-width: 768px) {
.ant-col {
  width: 100% !important;
}

.footer-content {
  flex-direction: column;
  gap: 12px;
}

.action-buttons {
  width: 100%;
  justify-content: flex-end;
}
}
</style>